import { useRef, useState } from "react";
import styles from "./index.module.less";
import {
	ProFormInstance,
} from "@ant-design/pro-components";
import { ConfigProvider, Flex } from "antd";
import useUrl from "@/hooks/useUrl";
import { RESULT_CODES } from "@/api/helper/ResultCode";
import Loading from "@/components/Loading";
import { useRequest } from "ahooks";
import { useEffect } from "react";
import AMap from "@/components/AMap";
import { Descriptions } from 'antd';
import { getJointDetail } from "@/api/modules/platform";
import { getAllOrgList, getDictByCode } from "@/api/modules/dict";
import { find } from 'lodash';
import { PageContainer } from '@ant-design/pro-layout';

export default () => {
	const formRef = useRef<ProFormInstance>();
	const { navigate, query } = useUrl();
	const detailId = query.get("detailId");
	const [detailInfo, setDetailInfo] = useState<any>({});
	const [location, setLocation] = useState<any>([]);
	const [rectList, setRectList] = useState<any>([]); //场景范围列表
	const { data: orgList } = useRequest(() => getAllOrgList({ page: { pageNum: 1, pageSize: 100 }}));
	const { data: pointTypeList } = useRequest(() => getDictByCode({ parentId: 0, code: "POINT_TYPE" }));
	const { data: alertTypeList } = useRequest(() => getDictByCode({ parentId: 0, code: "WARNING" }));
	const { data: noticeTypeList } = useRequest(() => getDictByCode({ parentId: 0, code: "NOTICE" }));

	const { loading: loadingDetail, runAsync: getDetailAsync, data: walkDetailInfo } = useRequest(getJointDetail, { manual: true });

	useEffect(() => {
		if (!detailId) return;
		getDetailAsync({ id: detailId }).then((res: any) => {
			if (res?.code === RESULT_CODES.SUCCESS) {
				const data = res?.data ?? {};
				setDetailInfo(data);
				const pointArr = data?.lonLat02?.split(',')
				const InitialData = {
					...data,
					waitTimeMin: data.waitTime / 60,
					longitude: pointArr[0],
					latitude: pointArr[1],
				};
				setRectList([{path: JSON.parse(data?.points)}])
				setLocation([{position: pointArr}])
				formRef.current?.setFieldsValue(InitialData);
			}
		});
	}, []);

	return (
		<PageContainer
			title=" "
			breadcrumb={{
				routes: [
					{ href: '/platform/joint', breadcrumbName: '接驳点管理' },
					{ href: '', breadcrumbName: '接驳点详情' },
				],
			}}
		>
			<Loading isHeight100 loading={loadingDetail}>
				<div className={styles.detailContainer}>
					<div className={styles.container}>
						<div className={styles.content_wrap}>
							<div className={styles.content}>
								<div className={styles.moduleTitle}>基本信息</div>
								<Descriptions title="" column={1} labelStyle={{width: '100px'}}>
									<Descriptions.Item label="接驳点名称">{detailInfo.name}</Descriptions.Item>
									<Descriptions.Item label="接驳点类型">{find(pointTypeList?.data, (item: any) => `${item.value}` === `${detailInfo?.type}`)?.label || '-'}</Descriptions.Item>
									<Descriptions.Item label="所属组织">{find(orgList?.data, (item: any) => item.id === detailInfo?.createOrgId)?.name || '-'}</Descriptions.Item>
									<Descriptions.Item label="关联月台">{detailInfo.scName}</Descriptions.Item>
									<Descriptions.Item label="位置坐标">{detailInfo.lonLat}</Descriptions.Item>
									<Descriptions.Item label="等待时长">{detailInfo.waitTime / 60}min</Descriptions.Item>
									<Descriptions.Item label="站点联系人">{detailInfo.callName}</Descriptions.Item>
									<Descriptions.Item label="联系人电话">{detailInfo.callPhone}</Descriptions.Item>
									<Descriptions.Item label="通知状态">{find(noticeTypeList?.data, (item: any) => `${item.value}` === `${detailInfo?.notice}`)?.label || '-'}</Descriptions.Item>
									<Descriptions.Item label="预警状态">{find(alertTypeList?.data, (item: any) => item.value === `${detailInfo?.warning}`)?.label || '-'}</Descriptions.Item>
								</Descriptions>
							</div>
						</div>
						<Flex justify="right" className={styles.btns}></Flex>
					</div>
					<div className={styles.mapBox}>
						<div className={styles.moduleTitle}>地图预览</div>
						<div className={styles.mapOuter}>
							<AMap markers={location} polygons={rectList}/>
						</div>
					</div>
				</div>
			</Loading>
		</PageContainer>
	);
};
